<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿新浪微博发布评论js代码</title>

		<script src="js/xml.js"></script>

		<link href="css/reset.css" rel="stylesheet">
		<style>
			.main{
		width: 800px;
		margin:20px auto;
	}
	span{
		display: inline-block;
		width: 200px;
		height: 25px;
		line-height: 25px;
		vertical-align: center;
		text-align: left;
		margin-bottom: 10px;
	}
	.tag{
		font-size: 13px;
		margin-left: 370px;
		vertical-align: bottom;
		text-align: center;
		margin-bottom: 0;
	}
	.text{
		width: 750px;
		height: 180px;
		margin:0 auto;

		resize:none;
	}
	
	input{
		display: inline-block;
		width: 80px;
		height: 50px;
		background: #E2526F;
		border: 0;
		margin-left: 670px;
		margin-top: 10px;
	}
	.creatediv{
		width: 675px;
		height: 80px;
		border: 1px solid gray;
		position: relative;
		margin-top: 10px;
		padding-left: 75px;
	}
	.createinput{
		width: 80px;
		height: 30px;
		position:absolute;
		right: 5px;
		bottom:5px;
	}
	.createimg{
		width: 50px;
		height: 50px;
		position: absolute;
		top: 15px;
		left: 15px;
	}
	.createdivs{
		width:600px;
		height:50px;
		position: absolute;
		top: 15px;
		left: 85px;
	}
</style>

	</head>
	<body id="body">
		<script src="/demos/googlegg.js"></script>
		<div class="main">
			<span>你想对楼主说点什么</span>
			<span class="tag">你最多可以输入30个字符</span>
			<textarea id="text" cols="30" rows="10" maxlength="30" class="text"></textarea><br>
			<input type="button" value="发 表" id="ipt">
			<div id="txt">


			</div>
		</div>

		<script>
			var ipt = document.getElementById("ipt");
			var txt = document.getElementById('txt');
			var textarea = document.getElementById("text");
			ipt.onclick = function() {
				var textValue = textarea.value.LTrim();
				textarea.value = "";
				if (textValue.length > 0) {
					var divs = document.createElement("div");
					var imgs = document.createElement("img");
					var ps = document.createElement("p");
					var inputs = document.createElement("input");
					divs.setAttribute("class", "creatediv");
					imgs.setAttribute('class', "createimg");
					ps.setAttribute("class", "createdivs");
					inputs.setAttribute("class", "createinput");
					imgs.src = "pic/1.jpg";
					inputs.type = "button";
					inputs.value = "删除";
					ps.innerHTML = textValue;
					divs.appendChild(imgs);
					divs.appendChild(ps);
					divs.appendChild(inputs);
					if (txt.children.length == 0) {
						txt.appendChild(divs);

					} else {
						txt.insertBefore(divs, get_firstChild(txt))
					}
					inputs.onclick = function() {
						this.parentNode.parentNode.removeChild(this.parentNode)
					}
				}



			}
		</script>

		<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
		</div>
	</body>
</html>
